<template>
  <div class="p-card">
    <n-card content-style="word-break: normal;">
      <div>
        <vue-json-pretty
          :deep="3"
          selectableType="single"
          :showSelectController="false"
          :highlightMouseoverNode="true"
          path="res"
          :data="response"
          :showLength="true"
          :showIcon="true"
          :showLineNumber="true"
        >
        </vue-json-pretty>
      </div>
    </n-card>
    <n-card>
      <p>数据统计</p>
      <MdEditor
        type="linkAttr"
        :plugin="LinkAttr"
        target="_blank"
        v-model="text"
        previewTheme="github"
        codeTheme="gradient"
      />
    </n-card>
    <div class="page-main">
      <div class="card">
        <div class="card-item">
          <n-card>
            <p style="display: flex; align-items: center; gap: 5px">系统信息</p>
          </n-card>
        </div>

        <div class="card-item">
          <n-card>
            <p>数据统计</p>
            <article>
              <a
                href="https://github.com/Lruihao/lruihao.github.io"
                target="_blank"
                class="card-link"
                >Lruihao 博客</a
              >
            </article>
          </n-card>
        </div>
        <div class="card-item">
          <n-card>
            <p>登录记录&网址</p>
          </n-card>
        </div>
        <div class="card-item">
          <n-card>
            <p>使用情况</p>
            <n-progress type="circle" :percentage="percentageRef">
              <div class="cpu-d">
                <span style="text-align: center; font-size: 15px">{{
                  internalMemory + "%"
                }}</span>
                <span style="font-size: 10px">{{ usedMemoryMb }}</span>
                <span style="font-size: 10px">{{ freeMemoryMb }}</span>
              </div>
            </n-progress>
            <n-progress type="circle" :percentage="percentageRef">
              <div class="cpu-d">
                <span style="text-align: center; font-size: 15px">{{
                  percentageRef + "%"
                }}</span>
                <span style="font-size: 10px">cpu使用率</span>
              </div>
            </n-progress>
          </n-card>
        </div>
        <div class="card-item">
          <n-card>
            <p>表情&#128515;</p>
            <n-card>
              {{ myEmoji }}
            </n-card>
            <emoji @getEmoji="getEmoji" />
            <n-popover
              placement="bottom"
              trigger="click"
              @update:show="handleUpdateShow"
            >
              <template #trigger>
                <n-button>点击</n-button>
              </template>

              <div style="max-width: 332px">
                <n-tabs type="segment" animated closable>
                  <template v-for="(item, index) in emojis" :key="index">
                    <n-tab-pane :name="item.emoji" :tab="item.emoji">
                      <n-scrollbar style="max-height: 150px">
                        <n-button
                          tertiary
                          style="border-radius: 0px"
                          class="emojiList"
                          v-for="(item2, index2) in item.list"
                          :key="index2"
                          @click="handleEmoji(item2)"
                        >
                          {{ item2 }}
                        </n-button>
                      </n-scrollbar>
                    </n-tab-pane>
                  </template>
                </n-tabs>
              </div>
            </n-popover>
            <div>
              <n-button @click="btn_get1">获取富文本值</n-button>
            </div>
          </n-card>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, getCurrentInstance } from "vue";
import { getArticle } from "@/api/home";
import useWebSocket from "@/utils/websocket";
import { useStore } from "vuex";
import { MdEditor } from "md-editor-v3";
import "md-editor-v3/lib/style.css";
import VueJsonPretty from "vue-json-pretty";
import "vue-json-pretty/lib/styles.css";
import cardLink from "@/utils/linkcard.js";

const { proxy } = getCurrentInstance();
const percentageRef = ref(0);
const internalMemory = ref(0);
const usedMemoryMb = ref(0);
const freeMemoryMb = ref(0);
const text = ref("# Hello Editor");
const myEmoji = ref();
const response = {
  result: "",
  data: [
    {
      id: 1,
      title: "aaa",
    },
    {
      id: 2,
      title: "bbb",
    },
    {
      id: 3,
      title: "ccc",
    },
    {
      id: 4,
      title: "ddd",
    },
  ],
};

onMounted(() => {
  // cardLink();
  // 注册消息接收处理函数
  // proxy.$wsService.on("message", (data) => {
  //     console.log('monitord', data);
  //     let jsonData = JSON.parse(data)
  //     percentageRef.value = jsonData.CpuInfo
  //     internalMemory.value = jsonData.InternalMemory;
  //     usedMemoryMb.value = jsonData.UsedMemoryMb;
  //     freeMemoryMb.value = jsonData.FreeMemoryMb;
  // });
  getArticle({ type: "1" }).then((res) => {
    text.value = res.data;
  });
});
const getEmoji = (val) => {
  console.log("monitor", val);
  if (myEmoji.value == null) {
    myEmoji.value = val;
  } else {
    myEmoji.value += val;
  }
};
const btn_get1 = () => {
  window.$message.success(text.value);
};
</script>

<style scoped lang="scss">
.p-card {
  display: flex;
  flex-direction: column;
  gap: 10px;

  .p-h1 {
    display: flex;
    align-items: center;
    gap: 20px;
    justify-content: space-between;

    span {
      font-size: 20px;
      font-weight: 600;
    }
  }

  .p-h2 {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    flex-direction: row !important;
    justify-content: space-between;

    .p-h2-d1 {
      display: flex;
      flex-wrap: wrap;
      flex-direction: column;
      align-items: flex-start;
      gap: 10px;
    }

    .p-h2-d2 {
      min-height: 100px;
    }
  }

  .p-span {
    display: flex;

    span {
      position: relative;
      display: inline-block;
      color: #811717;
      /* 执行动画：动画名 时长 加速后减速 无限次播放 */
      animation: wavyAnimate 1s ease-in-out;
      /* 通过var函数调用自定义属性--i，再计算出动画延迟时间 */
      animation-delay: calc(0.1s * var(--i));
    }
  }

  /* 定义动画 */
  @keyframes wavyAnimate {
    0% {
      transform: translateY(0);
    }

    20% {
      transform: translateY(-10px);
    }

    40%,
    100% {
      transform: translateY(0);
    }
  }

  .p-dock {
    --w: 80px;
    --s: 1.5;
    --p: 10px;
    border: 1px solid;
    // padding: 10px;
    display: flex;
    cursor: pointer;
    width: fit-content;
    // gap: 10px;
    border-radius: 5px;
    .d-span {
      transition: transform 0.3s ease;
      transform-origin: top;
      font-size: 20px;
      background: #3adb1d;
      width: 50px;
      height: 50px;
      border: 1px solid #fff;
      aspect-ratio: 1;
      padding: 0 var(--p);
      border-radius: 5px;
      // position: relative; /* 为伪元素定位 */
    }
    .d-span::before {
      content: "";
      position: absolute;
      // top: -20px; /* 调整以覆盖 margin */
      left: calc((var(--s) * var(--w) - var(--w)) / 2); /* 调整以覆盖 margin */
      // right: -20px; /* 调整以覆盖 margin */
      // bottom: -20px; /* 调整以覆盖 margin */
      z-index: -1; /* 确保在背景下 */
    }
    .d-span:hover {
      transform: scale(var(--s));
      margin: 0 calc((var(--s) * var(--w) - var(--w)) / 2);
    }
  }
}

.page-main {
  .card {
    column-count: 2; // 定义三列
    column-gap: 20px; // 列与列的距离为20px

    .card-item {
      grid-row-start: auto;
      margin-bottom: 10px;
      break-inside: avoid; // 不被截断

      .cpu-d {
        display: flex;
        flex-direction: column;
      }

      p {
        font-size: 20px;
      }

      .p-h2 {
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
      }

      .p-word {
        overflow-wrap: break-word;
        padding: 10px;
        border-radius: 5px;
        word-wrap: break-word;
        background: #ddeefa;
      }

      .p-tag {
        display: flex;
        /* 允许换行 */
        flex-wrap: wrap;

        .p-tag-card {
          /* 每个元素占据 1/3 的宽度，并减去一些间距 */
          flex: 1 1 calc(33.333% - 10px);
          margin: 5px;
          box-sizing: border-box;
          min-width: 180px;
          cursor: pointer;
        }
      }

      .timeline-item {
        display: flex;
        justify-content: space-between;
        // white-space: nowrap;
        align-items: center;
        gap: 7px;
        margin-bottom: 5px;
      }

      /* 操纵before结合hover实现循序渐进的下划线 */
      .fadeIn-p {
        text-decoration: none;
        color: #333;
        position: relative;
        cursor: pointer;
        display: inline-block;
        padding: 2px;
      }

      .fadeIn-p::before {
        content: "";
        position: absolute;
        bottom: 0px;
        left: 0;
        height: 2px;
        background-color: #3adb1d;
        width: 0;
        -webkit-transition: width 0.2s linear;
        transition: width 0.2s linear;
      }

      .fadeIn-p:hover::before {
        width: 100%;
        -webkit-transition: width 0.2s linear;
        transition: width 0.2s linear;
      }

      .fade-overlay {
        position: absolute;
        pointer-events: none;
        /* 确保鼠标事件穿透到下面的内容 */
        transition: height 0.3s ease;
        /* 0.3秒的高度平滑过渡，缓动函数为ease */
      }

      .fade-overlay.top,
      .fade-overlay.bottom,
      .fade-overlay.left,
      .fade-overlay.right {
        background: linear-gradient(
          to bottom,
          rgba(255, 255, 255, 1),
          rgba(255, 255, 255, 0)
        );
      }

      .fade-overlay.top {
        top: 0;
        left: 0;
        right: 0;
        height: 0px;
        /* 调整高度以达到所需的虚化宽度 */
      }

      .fade-overlay.bottom {
        bottom: 0;
        left: 0;
        right: 0;
        height: 20px;
        background: linear-gradient(
          to top,
          rgba(255, 255, 255, 1),
          rgba(255, 255, 255, 0)
        );
      }

      .fade-overlay.left {
        top: 0;
        bottom: 0;
        left: 0;
        width: 20px;
        background: linear-gradient(
          to right,
          rgba(255, 255, 255, 1),
          rgba(255, 255, 255, 0)
        );
      }

      .fade-overlay.right {
        top: 0;
        bottom: 0;
        right: 0;
        width: 20px;
        background: linear-gradient(
          to left,
          rgba(255, 255, 255, 1),
          rgba(255, 255, 255, 0)
        );
      }
    }
  }
}
</style>
